<template>
  <div>
    <!-- 放置一个弹层 用来编辑新增节点 -->
    <el-dialog title="新增权限点" :visible="showDialog" @close="btnCancel">
      <!-- 表单 -->
      <el-form
        ref="perForm"
        :model="formData"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="formData.name" style="width: 90%" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="formData.code" style="width: 90%" />
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input v-model="formData.description" style="width: 90%" />
        </el-form-item>
        <el-form-item label="开启">
          <el-switch
            v-model="formData.enVisible"
            active-value="1"
            inactive-value="0"
          />
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" type="primary" @click="addFn">确定</el-button>
          <el-button size="small" @click="btnCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    // 是否显示弹层
    showDialog: {
      type: Boolean,
      default: false
    },
    clickId: {//点击那行的id
      type: [Number, String],
      default: ''
    },
    isEdit: {//编辑部门
      type: Boolean,
      default: false
    },
    originList: {//  // 用于校验的数组,权限点所有数据扁平结构
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    // // 自定义校验
    // // 校验权限名称
    // // 新增同级部门名字不能重复，同级部门的子级也不可以和同级部门的子级重复
    // const validName = (rule, value, callback) => {
    //   // 子级的pid等于父级的id ，
    //   // 一级id是没有的，自己的是有的
    //   // 添加时的校验： 名字不能取子元素的名字
    //   // rule规则对象，value上面的value值，如果相等，则校验通过cb()
    //   // 第一步进行遍历同级新增部门的名字，子级的pid===我当前点击的id
    //   let existNameList = this.originList.filter(item => item.pid === this.clickID)
    //   // 第二部进行编辑的名字
    //   if (this.isEdit) {
    //     // 编辑时的校验：名字不能取兄弟（排除自己）的名字
    //     // 通过外面点击行-传入id-找到这个对象-找到pid
    //     // 在通过pid找到同级部门
    //     const obj = this.originList.find(item => item.pid === this.clickId)//查找当前的自己pid等于我当前点击的id
    //     const pid = obj.pid//上面过滤好的pid就可以取出来
    //     existNameList = this.originList.filter(item => item.pid === pid && item.id !== this.clickID)
    //     //过滤我当前的pid等于我找找的pid且等于父级id单不等于我当前点击的id（把我抛出掉）
    //   }
    //   existNameList.map(it => it.name).includes(value)
    //     ? callback(new Error(value + '已经占用'))
    //     : callback()
    // }


    // // 校验权限标识
    // const validCode = (rule, value, callback) => {
    //   // 添加时的校验：code不能重复
    //   let existCodeList = this.originList.map(item => item.code)
    //   if (this.isEdit) {
    //     // 编辑时的校验: code能取自己
    //     existCodeList = this.originList.filter(item => item.id !== this.clickId).map(item => item.code)
    //   }
    //   existCodeList.includes(value)
    //     ? callback(new Error(value + '已经占用'))
    //     : callback()
    // }
    // 校验权限名称
    const validName = (rule, value, callback) => {
      // 添加时的校验： 名字不能取子元素的名字
      let existNameList = this.originList.filter(item => item.pid === this.clickId)
      if (this.isEdit) {
        // 编辑时的校验： 名字不能取兄弟（排除自己）的名字
        // 通过外面点击行->传入的id->找到这个对象->找到pid
        // 再通过pid找到同级部门
        const obj = this.originList.find(item => item.id === this.clickId)
        const pid = obj.pid
        existNameList = this.originList.filter(item => item.pid === pid && item.id !== this.clickId)
      }
      existNameList.map(it => it.name).includes(value)
        ? callback(new Error(value + '已经占用'))
        : callback()
    }

    // 校验权限标识
    const validCode = (rule, value, callback) => {
      // 添加时的校验：code不能重复
      let existCodeList = this.originList.map(item => item.code)
      if (this.isEdit) {
        // 编辑时的校验: code能取自己
        existCodeList = this.originList.filter(item => item.id !== this.clickId).map(item => item.code)
      }
      existCodeList.includes(value)
        ? callback(new Error(value + '已经占用'))
        : callback()
    }

    return {
      permissionList: [], // 权限管理列表数据
      formData: {
        name: '', // 名称
        code: '', // 权限标识
        description: '', // 描述
        enVisible: '0', // 开启
        // pid: '', // 添加到哪个节点下
        // type: '' // 类型吖
      },
      // 校验
      rules: {
        name: [{ required: true, message: '权限名称不能为空', trigger: 'blur' },
          { validator: validName, trigger: 'blur' }],
        code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' },
          { validator: validCode, trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 弹框确定按钮
    addFn () {
      // 兜底校验
      this.$refs.perForm.validate(valid => {
        if (valid) {
          // 一定要先下写数据，把值传回给父组件（尽量要拷贝一份）
          this.$emit('confirm', { ...this.formData })
          // 再去清空表单对象
          this.btnCancel()
        }
      })


    },
    // 弹框关闭按钮
    btnCancel () {
      this.formData = {
        name: '', // 名称
        code: '', // 权限标识
        description: '', // 描述
        enVisible: '0', // 开启
        pid: '', // 添加到哪个节点下
        type: '' // 类型吖
      }
      this.$refs.perForm.resetFields()//表单置空校验
      this.$emit('update:showDialog', false)

    }
  }
}
</script>